import 'package:flutter/material.dart';
import 'package:schoollifedemo/business/personal/viewmodel/password_change_page_viewmodel.dart';
import 'package:schoollifedemo/commonwidget/button_widget.dart';
import 'package:schoollifedemo/commonwidget/circle_empty_widget.dart';
import 'package:schoollifedemo/commonwidget/common_base_page.dart';
import 'package:schoollifedemo/commonwidget/text_widget_with_overflow.dart';
import 'package:schoollifedemo/commonwidget/textfield_widget.dart';

class PasswordChangePage extends BaseStatefulPage {
  const PasswordChangePage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _PasswordChangePageState();
  }
}

class _PasswordChangePageState extends BasePageState<PasswordChangePage> {
  final PasswordChangePageViewModel _viewModel = PasswordChangePageViewModel();

  final Color _errorColor = const Color(0xFFE85252);
  final Color _focusBlueColor = const Color(0xFF529FE8);
  final Color _defaultBlueColor = const Color(0xFFB8DCFF);

  Color _currentPasswordColor = const Color(0xFFB8DCFF);
  Color _newPasswordColor = const Color(0xFFB8DCFF);
  Color _againNewPasswordColor = const Color(0xFFB8DCFF);

  bool isCurrentPasswordFocus = false;
  bool isNewPasswordFocus = false;
  bool isAgainNewPasswordFocus = false;
  bool _buttonEnable = false;

  String _currentPassword = '';
  String _newPassword = '';
  String _againNewPassword = '';

  @override
  void initState() {
    _viewModel.init();
    super.initState();
  }

  @override
  void dispose() {
    _viewModel.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          // 取消焦点
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: _body(),
      ),
    );
  }

  Widget _body() {
    return Container(
      color: Colors.white,
      child: ListView(
        physics: const BouncingScrollPhysics(),
        children: [

          const Padding(
            padding: EdgeInsets.only(left: 15, right: 15, top: 28),
            child: TextWidgetWithOverflow(
              '密码修改',
              textAlign: TextAlign.left,
              insideColor: Colors.transparent,
              fontSize: 28,
            ),
          ),
          Padding(
            padding:
                const EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
            child: CircleEmptyWidget(
              Row(
                children: [
                  const TextWidgetWithOverflow(
                    '当前密码',
                    fontSize: 14,
                    insideColor: Colors.transparent,
                    width: 100,
                  ),
                  Expanded(
                    child: CircleEmptyWidget(
                      TextFieldWidget(
                        isPassword: true,
                        maxLength: 20,
                        onTextChange: (text) {
                          _currentPassword = text;
                        },
                        onFocus: (isFocus) {
                          _checkButtonEnable();
                          isCurrentPasswordFocus = isFocus;
                          if (isFocus) {
                            _currentPasswordColor = _focusBlueColor;
                          } else {
                            _currentPasswordColor = _defaultBlueColor;
                          }
                          setState(() {});
                        },
                        fontSize: 16,
                        insideColor: _currentPasswordColor,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding:
                const EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
            child: CircleEmptyWidget(
              Row(
                children: [
                  const TextWidgetWithOverflow(
                    '新密码',
                    fontSize: 14,
                    insideColor: Colors.transparent,
                    width: 100,
                  ),
                  Expanded(
                    child: CircleEmptyWidget(
                      TextFieldWidget(
                        isPassword: true,
                        maxLength: 20,
                        onTextChange: (text) {
                          _newPassword = text;
                        },
                        onFocus: (isFocus) {
                          _checkButtonEnable();
                          isNewPasswordFocus = isFocus;
                          if (isFocus) {
                            _newPasswordColor = _focusBlueColor;
                          } else {
                            _newPasswordColor = _defaultBlueColor;
                          }
                          setState(() {});
                        },
                        fontSize: 16,
                        insideColor: _newPasswordColor,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding:
                const EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
            child: CircleEmptyWidget(
              Row(
                children: [
                  const TextWidgetWithOverflow(
                    '重复新密码',
                    fontSize: 14,
                    insideColor: Colors.transparent,
                    width: 100,
                  ),
                  Expanded(
                    child: CircleEmptyWidget(
                      TextFieldWidget(
                        isPassword: true,
                        maxLength: 20,
                        onTextChange: (text) {
                          _againNewPassword = text;
                        },
                        onFocus: (isFocus) {
                          _checkButtonEnable();
                          isAgainNewPasswordFocus = isFocus;
                          if (isFocus) {
                            _againNewPasswordColor = _focusBlueColor;
                          } else {
                            _againNewPasswordColor = _defaultBlueColor;
                          }
                          setState(() {});
                        },
                        fontSize: 16,
                        insideColor: _againNewPasswordColor,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _rightArrowButton(context),
            ],
          )
        ],
      ),
    );
  }

  void _checkButtonEnable() {
    if (_currentPassword.isEmpty) {
      _buttonEnable = false;
      return;
    }
    if (_newPassword.isEmpty) {
      _buttonEnable = false;
      return;
    }
    if (_againNewPassword.isEmpty) {
      _buttonEnable = false;
      return;
    }
    _buttonEnable = true;
    return;
  }

  Widget _rightArrowButton(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 30),
      child: ButtonWidget(
        insideWidget: Image.asset('assets/images/common/img_arrow_right.png'),
        width: 80,
        height: 50,
        radius: 50,
        onButtonClick: !_buttonEnable
            ? null
            : () async {
                bool? isCorrect =
                    await _viewModel.checkPassword(password: _currentPassword);
                if (isCorrect == true) {
                  if (_viewModel.check2Password(
                      _newPassword, _againNewPassword)) {
                    // change password
                    _viewModel.changePassword(newPassword: _newPassword);
                    _viewModel.backToPage(context);
                  } else {
                    _newPasswordColor = _errorColor;
                    _againNewPasswordColor = _errorColor;
                    _buttonEnable = false;
                    setState(() {});
                  }
                } else {
                  _currentPasswordColor = _errorColor;
                  _newPasswordColor = _errorColor;
                  _againNewPasswordColor = _errorColor;
                  _buttonEnable = false;
                  setState(() {});
                }
              },
      ),
    );
  }
}
